<template>
	<!-- 自定义列表 -->
	<div class="cust-act-table hf">
		<el-table
			:data="tableList"
			ref="table"
			element-loading-text="拼命加载中..."
			:height="tableHeight !='' ? tableHeight : null"
			:highlight-current-row="false"
			class="table-part wf"
			lazy
			:border="tableType == 'editTable' ? true : false"
			:size="tableType == 'editTable' ? 'mini' : 'medium'"
			:rowKey="(record) => record.index"
			@row-click="rowClick"
		>
			<el-table-column v-if="showIdx" type="index" width="60" label="序号" align="center"></el-table-column>
			<el-table-column
				v-for="(i, idx) in colConfigs"
				:key="'col' + idx"
				:prop="i.prop"
				:label="i.label"
				:align="i.align"
				:width="i.width"
				:fixed="i.fixed"
				:show-overflow-tooltip="true"
				filter-placement="top"
			>
				<template slot-scope="scope">
					<div v-if="i.slot">
						<div v-if="tableType == 'editTable'">
							<div v-if="i.slot == 'inputIconR'">
								<div class="ipt-icon-in-table" v-if="i.type == 'inputIconR'">
									<el-input class="ipt" size="mini" v-model="scope.row[i.prop]"></el-input>
									<img class="ipr-icon-r" :src="i.icon.path" :width="i.icon.width" :height="i.icon.height">
								</div>
								<div class="ipt-icon-in-table" v-else-if="i.type == 'textIconR'">
									<span class="ipt">{{scope.row[i.prop]}}</span>
									<img class="ipr-icon-r" :src="i.icon.path" :width="i.icon.width" :height="i.icon.height">
								</div>
							</div>
							<div class="date-in-table" v-else-if="i.slot == 'datePicker'">
								<el-date-picker type="date" align="right" size="mini" v-model="scope.row[i.prop]" style="width: 100%;" clearable></el-date-picker>
							</div>
							<div class="ipt-in-table" v-else-if="i.slot== 'input'">
								<el-input class="ipt" size="mini" v-model="scope.row[i.prop]"></el-input>
							</div>
							<div class="ipt-in-table" v-else-if="i.slot == 'select'">
								<el-select v-if="i.type == 'select'" size="mini" v-model="i.v" :placeholder="i.placeholder" :disabled="i.disabled">
									<el-option v-for="(j, idxJ) in i.option" :key="'option'+idxJ" :label="j.l" :value="j.v" :disabled="j.disabled"> {{j.l}}</el-option>
								</el-select>
							</div>
							<div v-else-if="i.slot=='jump'" class="ipt-in-table">
								<span @click="$emit('boxClick', i.openModal)" class="ipt" style="color: #11A389">{{scope.row[i.prop]}}</span>
							</div>
							<div v-else-if="i.slot == 'colorText'" class="ipt-in-table">
								<span class="ipt" :style="{'color': i.color, 'cursor':'default'}">{{scope.row[i.prop]}}</span>
							</div>
							<div v-else-if="i.slot == 'lcbCheckbox' && i.type == 'checkBox'">
								<el-checkbox v-model="i.checked" :disabled="i.disabled"></el-checkbox>
							</div>
						</div>
					</div>
					<div v-else>
						<span v-if="tableType == 'problemManagementDoing' && i.prop == 'wtzt' && scope.row.wtzt" :class="scope.row.wtzt == '未处理' ? 'problem-management-state state1' : scope.row.wtzt == '处理中' ? 'problem-management-state state2' : scope.row.wtzt == '已解决' ? 'problem-management-state state3' : 'problem-management-state'">
							{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}
						</span>
						<div v-else-if="tableType == 'problemManagement' && i.prop === 'xcwt' && scope.row.xcwt" class="green">
							<span v-if="scope.row.xcwt != '0'" style="cursor: pointer;" @click="boxClick(scope.row.xmmc, i.label, '', scope.row.wtzs)">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
							<span v-else style="cursor: default;">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
						</div>
						<span v-else-if="tableType == 'problemManagement' && i.prop === 'yjj' && scope.row.yjj" class="green"  style="cursor: pointer;" @click="boxClick(scope.row.xmmc, i.label, '',scope.row.wtzs)">
							{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}
						</span>
						<div v-else-if="tableType == 'taskList' && i.prop !== 'xmmc' && i.prop !== 'rwzs'" class="green">
							<span v-if="scope.row[i.prop] != '0'" style="cursor: pointer;" @click="boxClick(scope.row.xmmc, i.label, scope.row[i.prop])">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
							<span v-else style="cursor: default;">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
						</div>
						<div v-else-if="tableType == 'changePlan' && i.prop !== 'xmmc' && i.prop !== 'rwzs'" class="green">
							<span v-if="scope.row[i.prop] != '0'" style="cursor: pointer;" @click="boxClick(scope.row.xmmc, i.label, scope.row[i.prop])">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
							<span v-else style="cursor: default;">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
						</div>
						<span v-else-if="tableType == 'stakeholderManagementDoing' && i.prop === 'pgcyd' && scope.row.pgcyd" :class="scope.row.pgcyd === '中立' ? 'stakeholder-text-bg' : ''">
							{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}
						</span>
						<span v-else-if="tableType == 'stakeholderManagementDoing' && i.prop === 'dqcyd' && scope.row.dqcyd" :class="scope.row.dqcyd === '中立' ? 'stakeholder-text-bg' : ''">
							{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}
						</span>
						<div v-else-if="tableType == 'qualityControl' && i.prop != 'xmmc'" class="green">
							<span v-if="scope.row[i.prop] != '0'" style="cursor: pointer;" @click="boxClick(scope.row.xmmc, i.label, scope.row[i.prop])">{{ scope.row[i.prop] }}</span>
							<span v-else style="cursor: default;">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
						</div>
						<div v-else-if="tableType == 'riskMonitoring' && i.prop != 'xmmc' && i.prop != 'xcbl'" class="green">
							<span v-if="scope.row[i.prop] != '0'" style="cursor: pointer;" @click="boxClick(scope.row.xmmc, i.label, scope.row[i.prop])">{{ scope.row[i.prop] }}</span>
							<span v-else style="cursor: default;">{{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
						</div>
						<span v-else> {{ scope.row[i.prop] ? scope.row[i.prop] : "" }}</span>
					</div>
				</template>
				<div v-if="i.children">
					<el-table-column
						v-for="(j, idxJ) in i.children"
						:key="'col' + idxJ"
						:prop="j.prop"
						:label="j.label"
						:align="j.align"
						:width="j.width"
						:fixed="j.fixed"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<div v-if="resourceName=='cost-control-doing'">
								<div v-if="idxJ == 1 || idxJ == 2" :class="idxJ == 1 || idxJ == 2 ? 'green' : ''" @click="boxClick(scope.row.fylx, i.label, j.label, scope.row[i.children[1].prop], scope.row[i.children[2].prop])">
									<span v-if="idxJ == 1 || idxJ == 2" :class="idxJ == 1 || idxJ == 2 ? 'green' : ''">
										{{ scope.row[j.prop] ? (scope.row[j.prop]).replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,')+'.00' : "" }}
									</span>
								</div>
								<span v-else-if="idxJ == 0"> {{ scope.row[j.prop] ? scope.row[j.prop]*100+'%' : "" }} </span>
								<span v-else>{{ scope.row[j.prop] ? (scope.row[j.prop]).replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,')+'.00' : "" }}</span>
							</div>
							<span v-else>{{ scope.row[j.prop] }}</span>
						</template>
					</el-table-column>
				</div>
			</el-table-column>

			<el-table-column v-if="showAct == true" label="操作" :width="tableType == 'stakeholderManagementDoing'?230:tableType == 'costControlDoing'?250:160" align="center" fixed="right">
				<template slot-scope="scope">
					<div v-if="tableType == 'detail'" class="table-action">
						<el-button class="act-btn" type="text" @click="goDetail(scope.row)"> 查看详情 </el-button>
					</div>
					<div v-else-if="tableType == 'tabTableActDetail'" class="table-action">
						<el-button class="act-btn" type="primary" size="mini" round plain @click="goDetail(scope.row)"> 查看 </el-button>
					</div>
					<div v-if="tableType == 'edit'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row)"> 修改 </el-button>
					</div>
					<div v-if="tableType == 'planPreparation'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row)"> 计划编制 </el-button>
					</div>
					<div v-if="tableType == 'dailyReport' || tableType == 'weeklyReport' || tableType == 'monthlyReport'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row)"> 整改通知 </el-button>
					</div>
					<div v-if="tableType == 'costControlDoing'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '0')"> 支出申请 </el-button>
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '1')"> 预算调整 </el-button>
					</div>
					<div v-if="tableType == 'costControlEnd'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row)"> 成本登记 </el-button>
					</div>
					<div v-if="tableType == 'contractManagement'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '0')"> 变更 </el-button>
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '1')"> 付款 </el-button>
					</div>
					<div v-if="tableType == 'problemManagementDoing'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '0')"> 问题处理 </el-button>
					</div>
					<div v-if="tableType == 'qualityControlDoing'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '0')"> 整改反馈 </el-button>
					</div>
					<div v-if="tableType == 'riskMonitoringDoing'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '0')"> 风险更新 </el-button>
					</div>
					<div v-if="tableType == 'stakeholderManagementDoing'" class="table-action">
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '0')"> 更新 </el-button>
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '1')"> 移出 </el-button>
						<el-button class="act-btn" type="primary" plain @click="goDetail(scope.row, '2')"> 移入 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="currentPage"
			:page-sizes="[10, 20, 30, 40, 50]"
			:page-size="size"
			background
			layout="total, prev, pager, next, sizes"
			:total.sync="allPage"
			v-if="pagin"
		>
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: "custActTable",
		props: {
			showIdx: {
				type: Boolean,
				default: () => false,
			},
			showAct: {
				type: Boolean,
				default: () => false,
			},
			list: {
				type: Array,
				default: () => [],
			},
			colConfigs: {
				type: Array,
				default: () => [],
			},
			loading: {
				type: Boolean,
				default: () => false,
			},
			rKey: {
				type: String,
				default: () => "",
			},
			tableType: {
				type: String,
				default: () => "",
			},
			pageNum: {
				type: Number,
				default: () => 1,
			},
			pageSize: {
				type: Number,
				default: () => 10,
			},
			total: {
				type: Number,
				default: () => 0,
			},
			pagin: {
				type: Boolean,
				default: () => true,
			},
			resourceName: {
				type: String,
				default: () => "",
			},
			tableHeight: {
				type: String,
				default: () => "",
			}
		},
		data() {
			return {
				tableList: [],
				columns: [],
				currentPage: 1, // 当前页
				size: 10, // 每页条数
				allPage: 0, // 总条数
			};
		},
		watch: {
			tableHeight(n){},
			tableList: {
				handler(n, o) {},
				deep: true,
				immediate: true
			},
			list: {
				handler(n, o) {
					if(n && n.length!=0) {
						n.map((i, idx) => {
							i.idx = idx + 1;
						});
						this.tableList = n;
					} else {
						this.tableList = [];
					}
				},
				deep: true,
				immediate: true
			},
			colConfigs: {
				handler(n, o) {
					this.columns = n;
				},
				deep: true,
			},
			rKey(n) {},
			tableType(n) {},
			pageNum(n) {
				if (n) {
					this.currentPage = n;
				}
			},
			pageSize(n) {
				if (n) {
					this.size = n;
				}
			},
			total(n) {
				if (n) {
					this.allPage = n;
					this.$emit('changePage', {
						pageNum: this.currentPage,
						pageSize: this.size,
						total: this.allPage
					})
				}
			},
			loading(n) {}
		},
		mounted() {
			setTimeout(() => {
				this.tableList = this.list;
				if(this.tableList && this.tableList.length>0) {
					this.tableList.map((i, idx) => {
						i.idx = idx + 1;
					});
				} else {
					this.tableList = [];
				}
				this.columns = this.colConfigs;
				if(this.tableList.length > 0) {
					this.allPage = this.tableList.length;
				} else {
					this.allPage = 0;
				}
			}, 1500);
		},
		methods: {
			/**
			 * @author Wrl
			 * 点击列表回调
			 */
			rowClick(row) {
				this.$emit("getSelectedRow", row);
			},
			/**
			 * @author Wrl
			 * 编辑
			 */
			goEdit(row) {
				this.$emit("getEdit", row);
			},
			/**
			 * @author Wrl
			 * 删除
			 */
			goDelete(row) {
				this.$emit("getDelete", row);
			},
			/**
			 * @author Wrl
			 * 点击查看详情  actIdx 操作中的按钮序列
			 */
			goDetail(row, actIdx) {
				setTimeout(() => {
					if(actIdx) {
						row.actIdx = actIdx;
					}
					this.$emit("getDetail", row);
				}, 10)
			},
			/**
			 * @author Wrl
			 * 点击单元格
			 */
			boxClick(a, b, c, d, e) {
				let obj = {
					a: a,
					b: b,
					c: c,
					d: d,
					e: e
				}
				this.$emit("boxClick", obj)
			},
			/**
			 * @author Wrl
			 * 监听每页条数选择
			 */
			handleSizeChange(val) {
				this.size = val;
				this.$emit("changePage", {
					pageNum: this.currentPage,
					pageSize: val,
					total: this.allPage
				});
			},
			/**
			 * @author Wrl
			 * 监听当前页
			 */
			handleCurrentChange(val) {
				this.currentPage = val;
				this.$emit("changePage", {
					pageNum: val,
					pageSize: this.size,
					total: this.allPage
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.cust-act-table {
		::v-deep {
			.el-table__fixed-right::before {
				background-color: transparent !important;
			}
			.el-tooltip__popper {
				top: 0;
				left: 0;
			}
		}
		.problem-management-state {
			background: transparent;
			padding: 2px 5px;
			border-radius: 3px;
			&.state1 {
				color: #ffffff;
				background: #ff8b00; // 未处理
			}
			&.state2 {
				color: #ffffff;
				background: #0086e5; // 处理中
			}
			&.state3 {
				background: transparent; // 已解决
			}
		}
		.stakeholder-text-bg {
			width: 100%;
			display: block;
			border-radius: 3px;
			color: #ffffff;
			background: rgba(17, 169, 131, 0.75);
			padding: 2px 0;
		}
		.level1 {
			color: #ff4349;
		}
		.level2 {
			color: #ff8b00;
		}
		.level3 {
			color: #87d067;
		}
		.level4 {
			color: #0086e5;
		}
		.green {
			color: #18be6b;
			span {
				width: 100%;
				display: block;
			}
		}
		.red {
			color: #ed4014;
		}
		.act-btn {
			display: block;
			z-index: 100;
			padding: 5px 10px;
		}
		.table-action {
			width: 100%;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
		.ipt-in-table {
			width: 100%;
			display: inline-flex;
			align-items: center;
			.ipt {
				width: 98%;
				border-bottom: 1px solid #d4d4d4;
			}
			::v-deep .el-input__inner {
				margin-top: -2px;
				padding: 5px 10px;
				border: none;
				text-align: right;
			}
		}
		.ipt-icon-in-table {
			width: 100%;
			display: inline-flex;
			align-items: center;
			.ipt {
				width: calc(100% - 20px);
			}
			.ipr-icon-r {
				margin: 6px 5px;
			}
		}
		.date-in-table {
			::v-deep {
				.el-date-editor {
					border-bottom: 1px solid #d4d4d4;
					.el-input__inner {
						margin-top: -2px;
						padding: 5px 10px;
						border: none;
					}
					.el-input__prefix {
						right: 0;
						top: -2px;
						left: auto;
						text-align: right;
						i {
							color: #11A389;
						}
					}
					.el-input__suffix {
						top: -2px;
						right: 15px;
						i {
							color: #11A389;
						}
					}
				}
			}
		}
	}
</style>

<style lang="scss">
	.el-pagination {
		text-align: right;
		margin: 16px auto;
		.el-pagination__total {
			color: #11A983 !important;
		}
	}
</style>
